import { defineComponent, ref, onMounted, onUnmounted, computed } from 'vue';
import Carousel from '../correctEditor/carousel';
import CorrectEditor from '../correctEditor/editor';
import { useImageProvide } from '@/domain/correction/hooks/image';
import { usePrepareProvide, usePrepareStore } from '@/domain/correction/hooks/prepare';
import Header from './header';
import CorrectionRemark from '../correctionRemark';
import { useCurrectStdStore } from '@/domain/correction/hooks/currectStd';
import { Dialog } from 'vant';
export default defineComponent({
  name: 'CorrectionEditor',
  props: {},
  setup(props) {
    const store = useCurrectStdStore();
    const browserBackshow = ref(false);
    //初始化 图像处理组件
    const img_store = useImageProvide(store.state.currentStdHomeWork?.stu_id || 0);
    const workerId = computed((val) => (store.state.homework ? store.state.homework.id : 0));
    const prepareStore = usePrepareStore();
    const prepareData = computed((val) => prepareStore.state.prepare);
    const remarkStatus = computed(() => store.state.remarkStatus);
    const state = {
      title: 'title',
      url: ''
    };
    onMounted(async () => {
      store.state.remarkStatus = false;
      if (history.state.title !== 'title') {
        window.history.pushState(state, 'title', window.location.href);
      }
      window.addEventListener('popstate', browserBack);
      // await store.initSubject();
      await img_store.initImageUrl(store.state.submitType, store.state.currentStdHomeWork!);
      await prepareStore.gainPrepare(workerId.value);
    });
    onUnmounted(() => {
      window.removeEventListener('popstate', browserBack, false);
    });
    // 浏览器回退
    const browserBack = () => {
      if (store.state.remarkStatus) {
        store.state.remarkStatus = false;
        window.history.pushState(state, 'title', '');
      } else {
        browserBackshow.value = true;
      }
    };
    const browserCancel = () => {
      browserBackshow.value = false;
      window.history.pushState(state, 'title', '');
    };
    const browserConfirm = () => {
      browserBackshow.value = false;
      if (img_store.state.isEditor) {
        img_store.state.isEditor = false;
        window.history.pushState(state, 'title', '');
      } else {
        window.history.back();
      }
    };
    const isEditor = computed(() => img_store.state.isEditor);

    return () => (
      <>
        {!remarkStatus.value ? (
          <div>
            <Header></Header>
            {/* <div
          onClick={() => {
            router.push({ path: '/classList', replace: false });
          }}
        >
          批改点评页
        </div> */}
            {isEditor.value ? <CorrectEditor prepareData={prepareData.value}></CorrectEditor> : <Carousel></Carousel>}
          </div>
        ) : (
          <CorrectionRemark></CorrectionRemark>
        )}
        <Dialog.Component
          show={browserBackshow.value}
          title="是否退出批改"
          message="退出后需要重新进行批改。"
          style="font-family:none"
          show-cancel-button
          onCancel={browserCancel}
          onConfirm={browserConfirm}
        />
      </>
    );
  }
});
